<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui-demo</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>


        <!-- cdn -->
        <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script> -->
    </head>



    <body>
        <div id="rateStar"></div>


        <script>
            //Demo
            layui.use(['form', 'element', 'layer', 'rate'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;
                var rate = layui.rate;

                //自定义文本
                rate.render({
                    elem: '#rateStar',
                    value: 3,   //默认值
                    text: true,  //开启文本
                    theme: '#009688', //颜色
                    length: 5,  //5颗星
                    // readonly: true,  是否只读
                    setText: function(value) { //自定义文本的回调
                        var arrs = {
                            '1': '极差',
                            '2': '差',
                            '3': '中等',
                            '4': '好',
                            '5': '极好'
                        };
                        this.span.text(arrs[value] || (value + "星"));
                        layer.alert('星级'+ value, {icon: 6});
                    }
                })

            });




        </script>


    </body>

</html>
